<template>
  <div id="message">
    <c-title :hide="false" :text="'消息'"></c-title>
    <div class="main" v-for="item in list" :key="item.id" @click="link(item)">
      <div class="avatar">
        <template v-if="message_type == 1">
          <van-image width="3.5rem" height="3.5rem" round :src="item.lawyer.avatar_image" />
          <div class="content">
            <span>{{ item.lawyer.name }}</span>
            <span class="text">{{ item.last_chat_content }}</span>
          </div>
        </template>
        <template v-else>
          <van-image width="3.5rem" height="3.5rem" round :src="item.member.avatar_image" />
          <div class="content">
            <span>{{ item.member.nickname }}</span>
            <span class="text">{{ item.last_chat_content }}</span>
          </div>
        </template>
      </div>
      <div class="time" v-if="item.last_msg_time">
        <div>
        {{ getMessageDate(item.last_msg_time) }}
        </div>
        <div  style="text-align: right;"  v-if="item.un_read_num>=1">
          <span class="un_read_num">
            {{ item.un_read_num }}
          </span>
        </div>
      </div>
    </div>
      <van-empty v-if="list.length==0" description="暂无信息" />
  </div>
</template>

<script>
import { scrollMixin } from "utils/mixin";
import { Image } from "vant";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      id: "",
      message_type: "",
      list: [],
      last_page: 1,
      current_page: 1,
      isLoadMore: true,
      timerId:null
    };
  },
 async activated() {
    this.isLoadMore = true;
    this.message_type = this.$route.query.message_type;
    if (this.$route.query.l_id) {
      this.id = this.$route.query.l_id;
    }
   await this.getData();
   this.timerId = setInterval(()=>{
    this.getData()
   },5000)
  },
  methods: {
    getMoreData() {
      this.isLoadMore = false;
      if (this.current_page >= this.last_page) {
        return false;
      } else {
        $http.post("plugin.lawyer-platform.frontend.controllers.message.getList", json).then(res => {
          this.isLoadMore=true;
          if (res.result == 1) {
            this.list = this.list.concat(res.data.list.data);
            this.current_page = res.data.list.current_page;
            this.last_page = res.data.list.last_page;
          }
        });
      }
    },
    getMessageDate(timestamp) {
      let date = new Date(timestamp * 1000);
      let year = date.getFullYear(),
        month = date.getMonth() + 1,
        day = date.getDate();
      if (month < 10) {
        month = `0${month}`;
      }
      if (day < 10) {
        day = `0${day}`;
      }
      return `${year}-${month}-${day}`;
    },
    getData() {
      let json = {
        message_type: this.message_type
      };
      if (this.id) {
        json.l_id = this.id;
      }
      $http.post("plugin.lawyer-platform.frontend.controllers.message.getList", json).then(res => {
        console.log(res);
        if (res.result == 1) {
          this.list = res.data.list.data;
          this.last_page = res.data.list.last_page;
        }
      });
    },
    link(data) {
      clearInterval(this.timerId)
      let json = {};
      if (this.message_type == 2 || this.message_type == 3) {
        json.chatType = 2;
        json.user_id =   data.uid;
        json.queue_id = data.id;
      } else {
        json.chatType = 1;
      }
      json.message_type = this.message_type;
      json.plugin_name = "lawyer";
      json.employeeId = data.employee_id;
      this.$router.push(this.fun.getUrl("chatWindow", {}, json));
    }
  },
  components: {
    VanImage: Image
  }
};
</script>

<style lang="scss" scoped>
.text {
  width: 10rem;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.content {
  display: flex;
  flex-direction: column;
  height: 60px;
  justify-content: space-between;
  text-align: left;
  margin-left: 0.5rem;
  width: 10rem;
  overflow: hidden;
}

.time {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  height: 3.5rem;
  justify-content: space-between;

  .un_read_num {
    padding: 0 0.375rem;
    line-height: 1.125rem;
    height: 1.125rem;
    font-size: 0.75rem;
    color: white;
    background-color: red;
    border-radius: 1.125rem;
    transform: scale(0.65);
  }
}

.name {
  margin-left: 0.5rem;
}

#message {
  background-color: #fff;
}

.avatar {
  display: flex;
  align-items: flex-start;
}

.main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: baseline;
  padding: 1rem;
  border-bottom: 1px solid rgba(241, 241, 241, 100);
}
</style>
